<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>账户信息</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,
         initial=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="css/account.css">

</head>

<body>
    <div class="Fade"></div>
    <div class="drawer">
        <a href="javascript:void(0)">
            <div class="close">x</div>
        </a>
        <div class="personinfo none">
            <div class="title">
                <h2>修改个人信息</h2>
            </div>
            <form class="form">
                <div class="form-group">
                    <label for="exampleInputEmail">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPhone">phone</label>
                    <input type="number" class="form-control" id="exampleInputPhone" placeholder="phone">
                </div>
                <div class="form-group">
                    <label>Question</label>
                    <select class="form__input form-control Question" id="exampleInputQuestion">
                        <option value="" selected:disabled style="display:none">Set One Question</option>
                        <option value="父亲的姓名">父亲的姓名</option>
                        <option value="母亲的姓名">母亲的姓名</option>
                        <option value="最好的朋友">最好的朋友</option>
                        <option value="喜欢的电影">喜欢的电影</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputanswer">answer</label>
                    <input type="text" class="form-control" id="exampleInputAnswer" placeholder="answer">
                </div>
                <button type="button" class="btn btn-info back">取消</button>
                <button type="button" class="btn btn-info submit">确定</button>
            </form>
        </div>
        <div class="changePass">
            <div class="title">
                <h2>重置密码</h2>
            </div>
            <form class="form">
                <div class="form-group">
                    <label for="passwordOld">旧密码</label>
                    <input type="password" class="form-control" id="passwordOld" id="" placeholder="请输入旧密码">
                </div>
                <div class="form-group">
                    <label for="passwordNew1">新密码</label>
                    <input type="password" class="form-control" id="passwordNew1" id="" placeholder="请输入新密码">
                </div>
                <div class="form-group">
                    <label for="passwordNew2">确认密码</label>
                    <input type="password" class="form-control" id="passwordNew2" placeholder="请输入新密码">
                </div>
                <button type="button" class="btn btn-info back">取消</button>
                <button type="button" class="btn btn-info reset_pass">确认重置</button>
        </div>
        <div class="text-foot">
        </div>
        </form>
    </div>
    <div class="payPic none">
        <div class="pic">
            <img src="" alt="">
        </div>
        <div class="Paybtn">
            <button class="btn btn-info judgePay">我已支付</button>
        </div>
    </div>
    </div>
    <div id="app">
        <!--头部-->
        <section>
            <header>
                <div class="top-header">
                    <div class="top-container">
                        <div class="top-left">
                            <h4>睿乐购</h4>
                        </div>
                        <div class="top-right">
                            <div class="dropdown">
                                <ul class="nav nav-tabs">
                                    <li role="presentation" class="dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                                            aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-user"></span>&nbsp;我的账号
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">我的账号</a></li>
                                            <li><a href="#" class="changeInfo">修改个人信息</a></li>
                                            <li><a href="#" class="changepass">修改密码</a></li>
                                            <li><a href="#">我的订单</a></li>
                                            <li role="separator" class="divider"></li>
                                            <li><a href="#" class="" data-toggle="modal" data-target="#myModal"
                                                    class="exit">退出</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </section>
        <!--主体-->
        <div class="center">
            <div class="cen-top">
                <div class="cen-top-con">
                    <a href="index.html">首页</a>
                    <span>/ 账户信息</span>
                </div>
            </div>
            <div class="cen-con">
                <div class="cen-con-left">
                    <aside class="left-b">
                        <a href="#" class="list-group-item"><span class="glyphicon glyphicon-user"></span>&nbsp;账户信息</a>
                        <span class="list-group-item">&nbsp;&nbsp;&nbsp;订单</span>
                        <a href="" class="list-group-item"><span
                                class="glyphicon glyphicon-list-alt"></span>&nbsp;我的订单</a>
                        <span class="list-group-item">&nbsp;&nbsp;&nbsp;资产</span>
                        <a href="#" class="list-group-item"><span
                                class="glyphicon glyphicon-gift"></span>&nbsp;我的优惠券</a>
                        <a href="#" class="list-group-item"><span class="glyphicon glyphicon-usd"></span>&nbsp;我的惠币</a>
                        <span class="list-group-item">&nbsp;&nbsp;&nbsp;设置</span>
                        <a href="#" class="list-group-item"><span
                                class="glyphicon glyphicon-map-marker"></span>&nbsp;我的收货地址</a>
                    </aside>
                </div>
                <div class="cen-con-right">
                    <div class="ccr-top">
                        <div class="ccr-top-l">
                            <div class="top-l-l">
                                <img src="https://asset1.djicdn.com/uploads/avatars/thumb_d1dd699b-04c9-4909-b208-d43ba5b5a25b.png"
                                    alt="图像">
                            </div>
                            <div class="top-l-r">
                                <h4 class="UserName"></h4>
                                <span></span><br>
                                <span class="glyphicon glyphicon-earphone"></span>
                                <span class="tellPhone"></span><br>
                                <span></span><br>
                                <!-- <a href="javascript:void(0)">修改密码&nbsp;<span
                                        class="glyphicon glyphicon-hand-right"></span></a> -->
                            </div>
                        </div>
                        <div class="ccr-top-r">
                            <div class="top-r-con">
                                <p>我的可用惠币</p>
                                <h4>￥0.00</h4>
                            </div>
                        </div>
                    </div>
                    <div class="ccr-bottom orderlist">
                        <div class="ccr-bottom-top">
                            <h4>最近订单</h4>
                        </div>
                        <div class="ccr-bottom-bo">
                            <div class="row">

                            </div>
                        </div>

                    </div>
                    <div class="ccr-bottom orderdetails none">
                        <div class="ccr-bottom-top">
                            <h4>订单详情</h4>
                        </div>
                        <div class="ccr-bottom-bo">
                            <div class="row">
                                <div class="col-md-12  mt-20">
                                    <div class="col-md-7">
                                        订单号：<span class="dtOrder_no"></span> &nbsp;&nbsp;&nbsp;&nbsp;订单时间 :
                                        <span class="dtTime"></span>
                                    </div>
                                    <div class="col-md-5 t-right">
                                        共<span class="dtCount"></span>件商品 合计: ￥<span class="dtPament"></span>
                                    </div>
                                </div>
                                <div class="col-md-12 jinDu">
                                    <div class="col-md-12 t_center mt-40 mb-80">
                                        <h4 class="successpay">支付成功</h4>
                                        <h4 class="waitpay mt-20 mb-20 none">等待付款</h4>
                                        <p class="successpay">我们会尽快处理您的订单</p>
                                        <div class="jiaoYiStatus inline-block">
                                            <div class="circle one ">
                                                <span> 已下单</span>
                                                <div class="create_time"></div>
                                            </div>
                                            <div class="line two"></div>
                                            <div class="circle two">
                                                <span> 已支付</span>
                                                <div class="payment_time"></div>
                                            </div>
                                            <div class="line three"></div>
                                            <div class="circle three">
                                                <span> 已发货</span>
                                                <div class="send_time"></div>
                                            </div>
                                            <div class="line four"></div>
                                            <div class="circle four">
                                                <span> 已接收</span>

                                            </div>
                                            <div class="line five"></div>
                                            <div class="circle five">
                                                <span> 已完成</span>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-8"></div>
                                    <div class="col-md-2 Cancel">
                                        <button class="btn btn-info fr cancel-btn">取消订单</button>
                                    </div>
                                    <div class="col-md-2 Pay-btn">
                                        <button class="btn btn-info fr Pay-btn" onclick="pay()">立即支付</button>
                                    </div>
                                    <div class="col-md-4 Refund none">
                                        <button class="btn btn-info fr refund ">申请退款</button>
                                    </div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div>
                                        <h4>商品清单</h4>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-12 mt-20">
                                        <div class="col-md-2">商品</div>
                                        <div class="col-md-4">2</div>
                                        <div class="col-md-2">价格</div>
                                        <div class="col-md-2">数量</div>
                                        <div class="col-md-2 t-right">小计</div>
                                    </div>
                                </div>
                                <div class="col-md-12 goodsList">
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-12 ">
                                        <div class="col-md-12 t-right">
                                            ￥<span class="TotalPrice"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div>
                                        <h4>配送信息</h4>
                                    </div>
                                </div>
                                <div class="col-md-12 lh-40">
                                    <div class="col-md-12 ">
                                        <div class="col-md-2">收件人</div>
                                        <div class="col-md-3 receiver"></div>
                                    </div>
                                    <div class="col-md-12 ">
                                        <div class="col-md-2">联系电话</div>
                                        <div class="col-md-3 receive_phone"></div>
                                    </div>
                                    <div class="col-md-12 ">
                                        <div class="col-md-2">配送地址</div>
                                        <div class="col-md-3 receive_address"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认是否退出？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary quit">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="./js/url.js"></script>
    <script>

        // 获取用户详细信息信息函数
        function getInfo() {
            $.ajax({
                type: 'POST',
                url: userUrl + '?type=get_information',
                xhrFields: { withCredentials: true },
                dataType: 'json',
                success: function (res) {
                    console.log(res.data)
                    if (res.status === 0) {
                        // console.log(res.data[0].answer)
                        $('.UserName').text(res.data[0].username)
                        $('.tellPhone').text(res.data[0].phone)
                        //修改个人信息的原始值
                        $('#exampleInputEmail').val(res.data[0].email)
                        $('#exampleInputPhone').val(res.data[0].phone)
                        $('#exampleInputQuestion').val(res.data[0].question)
                        $('#exampleInputAnswer').val(res.data[0].answer)
                    }
                },
                error: function (res) {
                    console.log(res)
                    console.log('获取出现错误')
                }
            })
        }
        //修改个人信息函数
        function changeInfo() {
            let email = $('#exampleInputEmail').val()
            let phone = $('#exampleInputPhone').val()
            let question = $('#exampleInputQuestion').val()
            let answer = $('#exampleInputAnswer').val()
            if (email === '') {
                alert('邮箱不能为空')
            } else {
                if (phone === '') {
                    alert('电话不能为空')
                } else {
                    if (question === '') {
                        alert('请选择问题')
                    } else {
                        if (answer === '') {
                            alert('请设置答案')
                        } else {
                            $.ajax({
                                type: 'POST',
                                url: userUrl,
                                dataType: 'json',
                                xhrFields: { withCredentials: true },
                                data: { 'email': email, 'phone': phone, 'question': question, 'answer': answer, 'type': 'update_information' },
                                success: function (res) {
                                    if (res.status === 0) {
                                        console.log('修改成功')
                                        close()
                                    }
                                },
                                error: function () {
                                    console.log('出现错误')
                                }
                            })
                        }
                    }
                }
            }
        }
        //获取用户详细信息信息
        getInfo()
        //点击确定修改个人信息
        $('.submit').click(function () {
            changeInfo()
        })
        //退出
        $('.quit').click(function () {
            $.ajax({
                type: 'GET',
                url: userUrl + '?type=logout',
                dataType: 'json',
                xhrFields: { withCredentials: true },
                success: function (res) {
                    if (res.status === 0) {
                        console.log('退出成功')
                        localStorage.clear()
                        window.location.href = 'index.html';
                    } else {
                        console.log("退出失败")
                    }
                },
                error: function () {
                    console.log('错误')
                }

            })
        })
        //显示商品列表 5.1 ke
        function showGoods(order_no) {
            $.ajax({
                type: "POST",
                url: orderUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'list', 'pageSize': 10, 'pageNum': 1 },
                dataType: "json",
                success: function (res) {
                    console.log(res.data)
                    let goodsArray
                    let addressmes
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].order_no == order_no) {
                            ORDER_NO = order_no
                            goodsArray = res.data[i].orderDetailVOList
                            addressmes = res.data[i].addressVO
                            break
                        }
                    }
                    // console.log(addressmes)
                    if (res.status === 0) {
                        let TotalPrice = 0
                        for (let i = 0; i < goodsArray.length; i++) { //遍历每条数据
                            const checked = goodsArray[i].checked
                            console.log(goodsArray[i])
                            if (checked === 0) {
                                continue
                            }
                            const product_name = goodsArray[i].product_name
                            const product_image = goodsArray[i].product_image
                            const price = goodsArray[i].current_unit_price
                            const quantity = goodsArray[i].quantity
                            const total_price = goodsArray[i].total_price
                            const main_image = goodsArray[i].product_image
                            const col =         //创建一个商品项
                                `
                                <div class="col-md-12 mt-20">
                                        <div class="col-md-2">
                                            <img src="${imgUrl + main_image}">
                                        </div>
                                        <div class="col-md-4">
                                            <span class='goodsName'>${product_name}</span>
                                        </div>
                                        <div class="col-md-2">
                                            <span>￥${price}</span>
                                        </div>
                                        <div class="col-md-2">
                                            <span>X${quantity}</span>
                                        </div>
                                        <div class="col-md-2 t-right">
                                            <span>￥${total_price}</span>
                                        </div>
                                    </div>
              `
                            $('.goodsList').append(col)  //将改商品添加到对应的地方
                            TotalPrice = total_price * 1 + TotalPrice * 1
                        }
                        $('.TotalPrice').text(`商品总计: ￥${TotalPrice}`)

                        //显示地址信息
                        showAddress(addressmes)
                    }
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        }
        //显示地址
        function showAddress(obj) {
            const receiver_name = obj.receiver_name
            const receiver_phone = obj.receiver_phone
            const receiver_address = obj.receiver_province + obj.receiver_city + obj.receiver_district
            $('.receiver').text(receiver_name)
            $('.receive_phone').text(receiver_phone)
            $('.receive_address').text(receiver_address)
        }
        //取消订单
        let ORDER_NO
        function cancel(order_no) {
            $.ajax({
                type: "POST",
                url: orderUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'cancel', 'order_no': order_no },
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    if (res.status === 0) {
                        window.location.href = 'my_account.html'
                    }
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        }
        $('.cancel-btn').click(function () {
            cancel(ORDER_NO)
        })
    </script>
    <script>
        $('.changeInfo').click(function () {
            $('.personinfo').removeClass('none')
            $('.changePass').addClass('none')
            open()
        })
        $('.changepass').click(function () {
            $('.personinfo').addClass('none')
            $('.changePass').removeClass('none')
            open()
        })
        $('.Fade,.back').click(function () {
            close()
        })
        function open() {
            $('body').css("overflow-y", "hidden")
            $('.Fade').fadeIn(500)
            $('.drawer').css("margin-right", 0)
        }
        function close() {
            $('.drawer').css("margin-right", -500)
            $('.Fade').fadeOut(500, function () {
                $('body').css("overflow-y", "scroll")
            })
        }

    </script>
    <script>

        function init() {
            showOrderList()
            LoginOr()
        }
        init()
        //重置密码
        $(".reset_pass").click(function () {
            let v1 = $("#passwordNew1").val()
            let v2 = $("#passwordNew2").val()
            let v3 = $("#passwordOld").val()
            console.log(v1, v2, v3)
            if (v1 === v2) {
                $.ajax({
                    type: "POST",
                    url: userUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'type': 'reset_password', 'passwordOld': v3, 'passwordNew': v1 },
                    dataType: "json",
                    success: function (res) {
                        console.log("====success====")
                        console.log(res)
                        if (res.status === 0) {
                            alert('密码修改成功')
                            close();
                            // window.location.href = 'my_account.html';
                        } else if (res.status === 100) {
                            alert('旧密码输入错误')
                        }
                    },
                    error: function () {
                        console.log(v1, v2, v3)
                        console.log('出现错误')
                    }
                })
            } else {
                alert('两次密码修改不一致')
            }
        })

        //显示订单列表 2.3
        function showOrderList() {
            $.ajax({
                type: "POST",
                url: orderUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'list', 'pageSize': 10, 'pageNum': 1 },
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    if (res.status === 0) {
                        const orderArray = res.data
                        console.log(orderArray)
                        let main_image, main_image2
                        for (let i = 0; i < orderArray.length; i++) {
                            const order_no = orderArray[i].order_no
                            const create_time = orderArray[i].create_time
                            const goodsList = orderArray[i].orderDetailVOList
                            const goodsCount = goodsList.length
                            const payment = orderArray[i].payment
                            const statusDesc = orderArray[i].statusDesc
                            // console.log(goodsList[0].product_image)
                            for (let i = 0; i < 1; i++) {
                                main_image = goodsList[0].product_image
                            }
                            // console.log(main_image)
                            // console.log(goodsList)
                            if (statusDesc === '未付款') {
                                let col =
                                    `
                                <div class="col-md-12 mt-20">
                                    <div class="col-md-12">
                                        <div class="col-md-6">
                                            订单号：${order_no} ${create_time}
                                        </div>
                                        <div class="col-md-6 t-right">
                                            共${goodsCount}件商品 合计: ￥${payment}
                                        </div>
                                    </div>
                                    <div class="col-md-12 p-20">
                                        <div class="col-md-5 orderImg">
                                            <img src="${imgUrl + main_image}">
                                            
                                        </div>
                                        <div class="col-md-3">
                                            <span class="PayStatus PsNo">未付款</span>
                                            </div>
                                        <div class="col-md-4 orderBtn">
                                            <button class="details-btn fr" onclick="orderdetails(${order_no})">订单详情</button>
                                            <button class='pay-btn'>立即支付</button>
                                        </div>
                                    </div>
                                </div>
                            `
                                $('.orderlist .ccr-bottom-bo .row').prepend(col)
                            } else {
                                let col =
                                    `
                                <div class="col-md-12 mt-20">
                                    <div class="col-md-12">
                                        <div class="col-md-6">
                                            订单号：${order_no} ${create_time}
                                        </div>
                                        <div class="col-md-6 t-right">
                                            共${goodsCount}件商品 合计: ￥${payment}
                                        </div>
                                    </div>
                                    <div class="col-md-12 p-20">
                                        <div class="col-md-5 orderImg">
                                            <img src="${imgUrl + main_image}"
                                                alt="">
                                        </div>
                                        <div class="col-md-3">
                                            <span class="PayStatus">已付款</span>
                                            </div>
                                        <div class="col-md-4 orderBtn">
                                            <button class="details-btn fr" onclick="orderdetails(${order_no})">订单详情</button>
                                        </div>
                                    </div>
                                </div>
                            `
                                $('.orderlist .ccr-bottom-bo .row').append(col)
                            }
                        }
                    }
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        }
        //查看订单详情
        function orderdetails(order_no) {
            $('.orderlist').addClass('none')
            $('.orderdetails').removeClass('none')
            $.ajax({
                type: "POST",
                url: orderUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'detail', 'order_no': order_no, 'pageSize': 10, 'pageNum': 1 },
                dataType: "json",
                success: function (res) {
                    console.log(res.data[0])
                    const order_no = res.data[0].order_no
                    const payment = res.data[0].payment
                    const create_time = res.data[0].create_time
                    const payment_time = res.data[0].payment_time
                    const send_time = res.data[0].send_time
                    const count = res.data[0].orderDetailVOList.length
                    const status = res.data[0].status
                    switch (status) {
                        case 1:
                            $('.one').addClass('b46')
                            $('.successpay').addClass('none')
                            $('.waitpay').removeClass('none')
                            $('.create_time').text(create_time)
                            break
                        case 2:
                            $('.one,.two').addClass('b46')
                            $('.successpay').removeClass('none')
                            $('.waitpay').addClass('none')
                            $('.create_time').text(create_time)
                            $('.payment_time').text(payment_time)
                            break
                        case 3:
                            $('.one,.two,.three').addClass('b46')
                            $('.successpay').removeClass('none')
                            $('.waitpay').addClass('none')
                            $('.create_time').text(create_time)
                            $('.payment_time').text(payment_time)
                            $('.send_time').text(send_time)
                            break
                    }
                    if (status !== 1) {
                        $('.Cancel,.Pay-btn').addClass('none')
                        $('.Refund').removeClass('none')
                    }
                    $('.dtOrder_no').text(order_no)
                    $('.dtTime').text(create_time)
                    $('.dtCount').text(count)
                    $('.dtPament').text(payment)
                    showGoods(order_no)
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        }
        //支付
        function pay() {
            $('.payPic').removeClass('none')
            $.ajax({
                type: "POST",
                url: payUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'pay', 'order_no': ORDER_NO },
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    if (res.status === 0) {
                        let imgPath = res.data.qrPath
                        $('.payPic img').attr('src', imgPath)
                    }
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        }

        $('.payPic').click(function (e) {
            console.log(e.target)
        })

        $('.judgePay').click(function () {
            $.ajax({
                type: "POST",
                url: payUrl,
                xhrFields: { withCredentials: true },
                data: { 'type': 'query_order_pay_status', 'order_no': ORDER_NO },
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    if (res.status === 0) {
                        $('.payPic').addClass('none')
                        window.location.href = 'my_account.html'
                    }
                },
                error: function () {
                    console.log('出现错误')
                }
            })
        })
    </script>
    <script>
        $(window).scroll(function () {
            var topp = $(document).scrollTop();
            if (topp > 135) {
                $('.cen-con-left>.left-b').css('top', '0')
            } else {
                $('.cen-con-left>.left-b').css('top', 135 - topp)
            }
        })
    </script>
</body>

</html>